<template>
	<view class="alert">
		<view class="main">
			<view class="icon mima"></view>
			<view class="welcome">
				<!--#ifdef MP-WEIXIN-->
				<open-data type="userNickName"></open-data>,您好！
				<!--#endif-->
				<!--#ifdef MP-TOUTIAO-->
				尊敬的用户,您好！
				<!--#endif-->
			</view>
			<view class="text">为了更好的为您提供服务,请登录后使用!</view>
			<button class="btns" type="primary" openType="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
		</view>
	</view>
</template>
 
<script>
	export default {
		name: 'login',
		data() {
			return {
				code : ''
			}
		},
		mounted() {
			this.getCode()
		},
		methods: {
			getCode(){
				let that = this
				//#ifdef MP-WEIXIN
				let provider = 'weixin'
				//#endif
				//#ifdef MP-TOUTIAO
				let provider = 'toutiao'
				//#endif
				uni.login({
					provider: provider,
					success: function (loginRes) {
						if(loginRes.errMsg == 'login:ok'){
							that.code = loginRes.code
						}
					}
				})
			},
			async getPhoneNumber(res) {
				let info = res.detail
				//#ifdef MP-WEIXIN
				let provider = 'weixin'
				//#endif
				//#ifdef MP-TOUTIAO
				let provider = 'toutiao'
				//#endif
				if ("getPhoneNumber:ok" == info.errMsg) {
					let token = await this.$api('POST','user',{provider:provider,code:this.code,encryptedData:info.encryptedData,iv:info.iv,spread_id:uni.getStorageSync('spread_id')})
					if(token){
						uni.setStorageSync('token',token)
						let pages = getCurrentPages()
						let page = pages[pages.length - 1]
						page.onPullDownRefresh()
					}
				}
			}
		}
	}
</script>

<style lang='scss'>
.alert {
	z-index: 198;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
	.main {
		z-index: 199;
		position: relative;
		flex-direction: column;
		align-items: center;
		padding: 50upx;
		border-radius: 12upx;
		width: 70%;
		height: 300upx;
		background: #ffffff;
		.icon {
			position: absolute;
			left: calc(50% - 60upx);
			top: -60upx;
			font-size: 100upx;
			background: #ffffff;
			color: $uni-color-primary;
			border-radius: 70upx;
			padding: 20upx;
		}
		.welcome {
			margin-top: 50upx;
			color: #4c4e60;
			font-size: 32upx;
		}
		.text {
			margin-top: 50upx;
			color: #4c4e60;
			font-size: 24upx;
		}
		.btns {
			margin-top: 60upx;
			width: 50%;
			height: 80upx;
			line-height: 80upx;
			border-radius: 40upx;
			text-align: center;
			color: white;
			font-size: 32upx;
			font-weight: bold;
			background: linear-gradient(to bottom, $uni-color-primary,#00BB00,#01814A);
		}
	}
}
</style>
